import React, { useRef, useEffect, useMemo } from 'react';
import { connect } from 'dva';
import { Link, Route, Switch } from 'dva/router';
import { Radio, Card, Button, Tag } from 'antd';
import {
    ArrowUpOutlined,
    ArrowDownOutlined,
    DownloadOutlined,
} from '@ant-design/icons';
import ReactEcharts from 'echarts-for-react';
import html2canvas from 'html2canvas';

let alarmTypesData = {
    
}

function PieChart({ data, forStatus }) {
    let textColor = 'rgba(0, 0, 0, 0.85)';
    let seriesData = [];
    let textToKey = {};
    Object.keys(data).forEach(key=>{
        seriesData.push({ name:key, value:data[key] });
    })
    
    return (
        <ReactEcharts
            notMerge={true}
            style={{ height: '100%' }}
            option={{
                
                legend: {
                    
                        data: seriesData.map((i) => i.name),
                        left: '56%',
                        top: 'middle',
                        // top:'12%',
                        // bottom:'10%',
                        orient: 'vertical',
                        type: 'scroll',
                        itemWidth: 8,
                        itemHeight: 8,
                        icon: 'circle',
                        formatter: (name) => {
                            // let temp = findData(name, seriesData);
                            let obj = seriesData.filter(i=>i.name === name)[0];
                            return `${name}\xa0\xa0 {value|${obj.value}}{title|件}`;
                        },
                        textStyle: {
                            color: textColor,
                            rich: {
                                title: {
                                    fontSize: 12,
                                    lineHeight: 12,

                                    color: textColor,
                                },
                                value: {
                                    fontSize: 14,
                                    fontWeight: 'bold',
                                    lineHeight: 20,
                                    color: textColor,
                                },
                            },
                        },
                },
                
                tooltip: {
                    trigger: 'item',
                },
                color: ['#ff7d00', '#f53f3f', '#0fc6c2', '#fadc19', '#9fdb1d'],
                series: [
                    {
                        label: {
                            show: false,
                            position: 'center',
                            // formatter: (params) => {
                            //     return `{a|${data.warningTotal || 0}}{b|件}\n{b|总告警}`;
                            // },
                            rich: {
                                a: {
                                    color: textColor,
                                    fontSize: 22,
                                    padding: [0, 4, 0, 0],
                                },
                                b: {
                                    color: '#8a8a8a',
                                    fontSize: 12,
                                    padding: [6, 0, 6, 0],
                                },
                            },
                        },
                        itemStyle: {
                            borderWidth: 2,
                            borderColor: '#fff',
                        },
                        labelLine: {
                            show: false,
                        },
                        type: 'pie',
                        radius: ['40%', '50%'],
                        center: ['32%', '50%'],
                        data: seriesData,
                    }
                ],
            }}
        />
    );
}

export default React.memo(PieChart);
